<template>
	<uni-popup ref="popup" type="center" :safe-area="false" @change="onChange">
		<view class="box">
			<view class="box_item l-f">
				<input 
				v-model="compayName"
				class="box_item_input" 
				type="text" 
				placeholder="请输入公司的名称" 
				:maxlength="30">
				<view>
					<view class="box_item_btn">默认</view>
				</view>
			</view>
			<view class="l-h46"></view>
			<view class="box_item l-f">
				<input 
				v-model="videoName"
				class="box_item_input" 
				type="text" 
				placeholder="请输入视频名称" 
				:maxlength="30">
			</view>
			<view class="l-h46"></view>
			<view @click="onStart" class="box_btn" hover-class="hover-scale" :hover-stay-time="100">开始录制</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name:"record-edit",
		data() {
			return {
				compayName: '公司名称',
				videoName: ''
			};
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			clsoe() {
				this.$refs.popup.close()
			},
			onChange(e) {
				console.log(e.show)
				if(!e.show) {
					this.$emit('close')
				}
			},
			// 开始录制视频
			onStart() {
				// 判空
				if(!this.compayName) {
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none',
						position: 'top'
					})
					return
				}
				if(!this.videoName) {
					uni.showToast({
						title: '请输入视频名称',
						icon: 'none',
						position: 'top'
					})
					return
				}
				this.clsoe()
				uni.chooseVideo({
					sourceType: ['camera'],
					maxDuration: 300,
					success: (e) => {
						// 判断时长
						if(e.duration > 5 * 60) {
							uni.showToast({
								title: '视频录制时长最多允许5分钟',
								icon: 'none'
							})
							return
						}
						this.$emit('success',{
							...e,
							compayName: this.compayName,
							name: this.videoName
						})
					},
					complete: () => {
						this.$emit('close')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.box {
	width: 630rpx;
	height: 560rpx;
	border-radius: 60rpx;
	background: linear-gradient(to bottom,rgba(11, 12, 13, 1),rgba(53, 54, 56, 1));
	box-shadow: inset 0 2rpx 2rpx 0px rgba(255, 255, 255, 0.25);
	padding: 38rpx;
	box-sizing: border-box;
	&_item {
		height: 148rpx;
		background: linear-gradient(to bottom,rgba(11, 12, 13, 1),rgba(53, 54, 56, 1));
		box-shadow: inset 0 2rpx 2rpx 0px rgba(255, 255, 255, 0.25);
		border-radius: 48rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		&_input {
			font-size: 28rpx;
			color: #ffffff;
			font-weight: 700;
			height: 80rpx;
		}
		&_btn {
			color: rgba(48, 210, 190, 1);
			font-size: 24rpx;
			width: 82rpx;
			height: 52rpx;
			border-radius: 26rpx;
			line-height: 52rpx;
			text-align: center;
			border: 2rpx solid rgba(48, 210, 190, 1);
		}
	}
	&_btn {
		height: 108rpx;
		line-height: 108rpx;
		text-align: center;
		border-radius: 54rpx;
		font-size: 32rpx;
		color: #ffffff;
		background: linear-gradient(to bottom,rgba(72, 228, 239, 1),rgba(43, 206, 181, 1));
	}
}
</style>